<div id="ad_manager">
    <div class="ad_manager">
        <el-row class="table_search">
            <el-col :span="20">
                <template>
                    <el-input v-model="keywords"
                              placeholder="广告编号/广告名称"
                              id="adNum"
                              style="font-size: 12px"
                              :clearable="true"
                              prefix-icon="el-icon-search">
                    </el-input>
                    <el-select v-model="queryAdType" placeholder="请选择广告类型" :clearable="true">
                        <el-option value="" label="请选择广告类型" ></el-option>
                        <el-option value="0" label="普通广告" ></el-option>
                        <el-option value="1" label="WEB广告" ></el-option>
                    </el-select>
                    <el-button type="primary" @click="searchFun" icon="el-icon-search" style="margin-left: 20px">搜索</el-button>
                </template>
            </el-col>

            <el-col :span="4" class="text-r">
                <el-button type="primary" icon="el-icon-plus" @click="addAd()">新增广告</el-button>
            </el-col>
        </el-row>

        <template>
            <el-table
                    size="mini"
                    @row-click='handleRowHandle'
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        align="center"
                        prop="adId"
                        label="广告序号"
                        width="100">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="adName"
                        label="广告名称"
                        width="200">
                </el-table-column>
                <el-table-column
                        align="center"
                        width="100"
                        prop="adType"
                        label="广告类型">
                </el-table-column>
                <el-table-column
                        align="center"
                        width="150"
                        prop="adLink"
                        label="广告URL">
                </el-table-column>
                <el-table-column
                        align="center"
                        width="250"
                        prop="adDesc"
                        label="描述">
                </el-table-column>
                <el-table-column
                        align="center"
                        width="150"
                        prop="status"
                        label="状态"
                        :filters="[{ text: '0', value: false }, { text: '1', value: true }]"
                        >
                    <template slot-scope="scope">
                        <div class="switchBox" id="switchBox">
                            <label class="switchBtn" @click="selSwitchBox($event,scope.row.status)" >
                                <span class="switchWords">禁用</span>
                                <i class="switchCircleActive" v-if="scope.row.status == true">
                                    <span class="switchCircleInfoActive"></span>
                                </i>
                                <i class="switchCircle" v-else>
                                    <span class="switchCircleInfo"></span>
                                </i>
                                <span class="switchWords" >可用</span>
                                <input type="checkbox" class="switchInput"  v-model="scope.row.status"   @change="changeAdType(scope.$index, scope.row)">
                            </label>
                        </div>
                        <!--<el-switch-->
                                <!--v-model="scope.row.status"-->
                                <!--@change="changeAdType(scope.$index, scope.row)"-->
                                <!--active-text="可用"-->
                                <!--inactive-text="禁用"-->
                                <!--active-color="#13ce66"-->
                                <!--inactive-color="#ff4949">-->
                        <!--</el-switch>-->
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="caozuobox">
                    <template slot-scope="scope"><!---->
                        <el-button-group>
                            <el-button type="primary" icon="el-icon-edit-outline" size="mini" @click="edit(scope.$index, scope.row)">编辑</el-button>
                            <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(scope.$index, scope.row)">删除</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </el-table>

            <div class="block footerBox" id="fenyeBox">
                <el-pagination
                        background
                        @current-change="handleCurrentChange"
                        layout="prev, pager, next"
                        :total="totalCount">
                </el-pagination>
            </div>
        </template>

    </div>
    <div class="isShowingBox" v-show="isShowingBox"></div>{{isOverflow}}
    <!--新增广告-->
    <el-dialog :title="dialogTitle" :close-on-press-escape="isEsc" :close-on-click-modal="ismodalClose" :show-close="showDelBtn" :visible.sync="dialogFormVisibleNew">
        <span class="delDialogBtn" @click="closeAddDialogAdd">x</span>
        <el-form
                class="add-template-form"
                :rules="adRules"
                ref="formNew"
                :model="form"
                label-width="200px">
            <el-form-item label="广告序号：" prop="adId">
                <!--<el-input v-model="form.adId" :disabled="true"></el-input>-->
                <input type="text" v-model="form.adId" :disabled="true" required lay-verify="required"  autocomplete="off" class="layui-input" style="width: auto">
            </el-form-item>
            <el-form-item label="广告名称：" prop="adName">
                <!--<el-input v-model="form.adName"></el-input>-->
                <input type="text" v-model="form.adName" required lay-verify="required"  autocomplete="off" class="layui-input" style="width: auto">
            </el-form-item>
            <el-form-item label="广告链接：" prop="adLink">
                <!--<el-input v-model="form.adLink"></el-input>-->
                <input type="text" v-model="form.adLink" required lay-verify="required"  autocomplete="off" class="layui-input" style="width: auto">

            </el-form-item>
            <el-form-item label="广告图片：" prop="adFilePath">
                <!--<input type="text" name="title" v-model="form.adFilePath" required lay-verify="required" disabled autocomplete="off" class="layui-input"style="width: 50%">-->
                <el-input v-model="form.adFilePath" :disabled="true" ></el-input>
                <br/>
                <form id="uploadFormNew" action="" method="post" enctype="multipart/form-data" name="fileForm" >
                    <div class="imagesContainer">
                        <div id="previewNew">

                        </div>
                        <div class="imagBox">
                            <label for="uploadImgNew" id="labelImgNew"></label>
                            <input type="file" maxlength="1" id="uploadImgNew" name="file_upload" accept="image/png, image/jpg" @change="uploadImg123New($event)" />
                        </div>
                    </div>
                    <span class="noticeUploadImg">温馨提示：如需上传文件请单击右侧上传框，选择文件</span>
                    <!--<input type="button" @click="ajaxSubmitForm();" value="确定">-->
                    <i class="delImgBtn" v-if="isShowDelBtnNew"  @click="removePic">x</i>
                </form>
                <!--<el-upload-->
                        <!--class="upload-demo"-->
                        <!--action="${basePath}bank/ad/upload"-->
                        <!--name="file_upload"-->
                        <!--accept="jpg,png"-->
                        <!--:on-success='upScuccess'-->
                        <!--:on-remove="handleRemove"-->
                        <!--:file-list="form.fileList"-->
                        <!--:limit="1"-->
                        <!--list-type="picture">-->
                    <!--<el-button size="small" type="primary">点击上传</el-button>-->
                    <!--<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
                <!--</el-upload>-->
            </el-form-item>
            <el-form-item label="广告类型：" prop="adType">
                <el-select v-model="form.adType" placeholder="请选择">
                    <el-option value="" label="请选择广告类型" ></el-option>
                    <el-option value="0" label="普通广告" ></el-option>
                    <el-option value="1" label="WEB广告" ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="广告状态：" prop="status">
                <div class="switchBox">
                    <label class="switchBtn" @click="selSwitchBox($event,form.status)" >
                        <span class="switchWords">停 &nbsp;&nbsp;用</span>
                        <i class="switchCircleActive" v-if="form.status == true">
                            <span class="switchCircleInfoActive"></span>
                        </i>
                        <i class="switchCircle" v-else>
                            <span class="switchCircleInfo"></span>
                        </i>
                        <span class="switchWords" >启用</span>
                        <input type="checkbox" class="switchInput"  v-model="form.status"   >
                    </label>
                </div>
                <!--<el-switch-->
                        <!--v-model="form.status"-->
                        <!--active-color="#13ce66"-->
                        <!--inactive-color="#ff4949"-->
                        <!--active-text="可用"-->
                        <!--inactive-text="禁用">-->
                <!--</el-switch>-->
            </el-form-item>
            <el-form-item label="广告描述：" prop="adDesc">
                <!--<el-input type="textarea" v-model="form.adDesc"></el-input>-->
                <textarea  placeholder="请输入" v-model="form.adDesc" class="layui-textarea" style="width: 300px"></textarea>
            </el-form-item>

        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="backHomeAdd">取 消</el-button>
            <el-button type="primary" @click="submitFormNew('formNew')">确 定</el-button>
        </div>
    </el-dialog>
    <!--编辑广告-->
    <el-dialog :title="dialogTitle" :close-on-press-escape="isEsc" :close-on-click-modal="ismodalClose" :show-close="showDelBtn" :visible.sync="dialogFormVisible">
        <span class="delDialogBtn" @click="closeAddDialog">x</span>
        <el-form
                class="add-template-form"
                :rules="adRules"
                ref="form"
                :model="form"
                label-width="200px">
            <el-form-item label="广告序号：" prop="adId">
                <!--<el-input v-model="form.adId" :disabled="true"></el-input>-->
                <input type="text" v-model="form.adId" :disabled="true" required lay-verify="required"  autocomplete="off" class="layui-input" style="width: auto">
            </el-form-item>
            <el-form-item label="广告名称：" prop="adName">
                <!--<el-input v-model="form.adName"></el-input>-->
                <input type="text" v-model="form.adName" required lay-verify="required"  autocomplete="off" class="layui-input" style="width: auto">
            </el-form-item>
            <el-form-item label="广告链接：" prop="adLink">
                <!--<el-input v-model="form.adLink"></el-input>-->
                <input type="text" v-model="form.adLink" required lay-verify="required"  autocomplete="off" class="layui-input" style="width: auto">

            </el-form-item>
            <el-form-item label="广告图片：" prop="adFilePath">
                <!--<input type="text" name="title" v-model="form.adFilePath" required lay-verify="required" disabled autocomplete="off" class="layui-input"style="width: 50%">-->
                <el-input v-model="form.adFilePath" :disabled="true" ></el-input>
                <br/>
                <form id="uploadForm" action="" method="post" enctype="multipart/form-data" name="fileForm" >
                    <div class="imagesContainer">
                        <div id="preview">
                            <img id="imghead" :src="imgSrc" style="width: 146px;height: 146px;">
                        </div>
                        <div class="imagBox">
                            <label for="uploadImg" id="labelImg"></label>
                            <input type="file" maxlength="1" id="uploadImg" name="file_upload" accept="image/png, image/jpg" @change="uploadImg123($event)" />
                        </div>
                    </div>
                    <span class="noticeUploadImg">温馨提示：如需上传文件请单击右侧上传框，选择文件</span>
                    <!--<input type="button" @click="ajaxSubmitForm();" value="确定">-->
                    <i class="delImgBtn" v-if="isShowDelBtnOld"  @click="removePicOld">x</i>
                </form>
                <!--<el-upload-->
                        <!--class="upload-demo"-->
                        <!--action="${basePath}bank/ad/upload"-->
                        <!--name="file_upload"-->
                        <!--accept="jpg,png"-->
                        <!--:on-success='upScuccess'-->
                        <!--:on-remove="handleRemove"-->
                        <!--:file-list="form.fileList"-->
                        <!--:limit="1"-->
                        <!--list-type="picture">-->
                    <!--<el-button size="small" type="primary">点击上传</el-button>-->
                    <!--<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
                <!--</el-upload>-->
            </el-form-item>
            <el-form-item label="广告类型：" prop="adType">
                <el-select v-model="form.adType" placeholder="请选择">
                    <el-option value="" label="请选择广告类型" ></el-option>
                    <el-option value="0" label="普通广告" ></el-option>
                    <el-option value="1" label="WEB广告" ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="广告状态：" prop="status">
                <div class="switchBox">
                    <label class="switchBtn" @click="selSwitchBox($event,form.status)" >
                        <span class="switchWords">停 &nbsp;&nbsp;用</span>
                        <i class="switchCircleActive" v-if="form.status == true">
                            <span class="switchCircleInfoActive"></span>
                        </i>
                        <i class="switchCircle" v-else>
                            <span class="switchCircleInfo"></span>
                        </i>
                        <span class="switchWords" >启用</span>
                        <input type="checkbox" class="switchInput"  v-model="form.status"   >
                    </label>
                </div>
                <!--<el-switch-->
                        <!--v-model="form.status"-->
                        <!--active-color="#13ce66"-->
                        <!--inactive-color="#ff4949"-->
                        <!--active-text="可用"-->
                        <!--inactive-text="禁用">-->
                <!--</el-switch>-->
            </el-form-item>
            <el-form-item label="广告描述：" prop="adDesc">
                <!--<el-input type="textarea" v-model="form.adDesc"></el-input>-->
                <textarea  placeholder="请输入" v-model="form.adDesc" class="layui-textarea" style="width: 300px"></textarea>
            </el-form-item>

        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="backHome">取 消</el-button>
            <el-button type="primary" @click="submitForm('form')">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="广告详情" :close-on-press-escape="isEsc" :close-on-click-modal="ismodalClose" :show-close="showDelBtn" :visible.sync="dialogInfoVisible" class="dialogDetails">
        <span class="delDialogBtn" @click="dialogInfoVisible=false;isShowingBox=false">x</span>
        <div class="info-template-content">
            <el-row class="item-row">
                <el-col :span="3" style="color: #666">广告序号</el-col>
                <el-col :span="15" style="color: #333">{{bean.adId}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="3" style="color: #666">广告名称</el-col>
                <el-col :span="15" style="color: #333">{{bean.adName}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="3" style="color: #666">广告描述</el-col>
                <el-col :span="15" style="color: #333">{{bean.adDesc}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="3" style="color: #666">广告类型</el-col>
                <el-col :span="15" style="color: #333">{{bean.adType}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="3" style="color: #666">广告链接</el-col>
                <el-col :span="15" style="color: #333">{{bean.adLink}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="3" style="color: #666">状态</el-col>
                <el-col :span="15" style="color: #333">{{bean.status?'启用':'停用'}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="3" style="color: #666">创建人</el-col>
                <el-col :span="15" style="color: #333">{{bean.creator}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="3" style="color: #666">创建时间</el-col>
                <el-col :span="15" style="color: #333">{{bean.createDate}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="3" style="color: #666">更新人</el-col>
                <el-col :span="15" style="color: #333">{{bean.updator}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="3" style="color: #666">更新时间</el-col>
                <el-col :span="15" style="color: #333">{{bean.updateDate}}</el-col>
            </el-row>
        </div>
    </el-dialog>
</div>

<script>

    $(function () {
        placeHolde("#adNum","广告编号或者广告名称");
    });

    var layer,
        loadRole;
    layui.use('layer', function(){
        layer = layui.layer;
        loadRole  = layer.load(1, {shade: [0.5, '#000']});

    });

    var ad;
    ad = new Vue({
        el: "#ad_manager",
        data: {
            isShowDelBtnNew:false,
            isShowDelBtnOld:false,
            isCheckedUser:true,
            imgSrc:'',

            isShowingBox:false,
            showDelBtn:false,

            ismodalClose:false,
            isEsc:false,
            fileNameModel:'',
            fileNameModelNew:'',
            isTrueName:false,



            dialogFormVisible: false,
            dialogFormVisibleNew:false,
            dialogTitle: '',
            dialogInfoVisible: false,//查看详情
            bean: {},//查看详情
            form: {
                adId:'',
                adName: '',
                adLink: '',
                adFilePath: '',
                adType: '',
                status: true,
                adDesc: '',
                fileList: []
            },
            adRules: {
                adName: [
                    {required: true, message: '请填写广告名称', trigger: 'blur'},
                    { max: 200, message: '长度在 200 个字符以内', trigger: 'blur' }
                ],
                adType: [
                    {required: true, message: '请选择广告类型', trigger: 'change'}
                ],
                adFilePath: [
                    {required: true, message: '请选择广告图片', trigger: 'change'}
                ]
            },
            keywords: '',
            queryAdType: '',
            tableData: [],
            totalCount: '',
            totalPage: '',
            currentPage: 1,
            pageSize: 10
        },
        methods: {
            clearlNotice:function(f) {
                $('#uploadFormFile')[0].reset();
                document.getElementById("uploadForm").reset();
                $("#preview")[0].innerHTML = '<img id="imghead" src="">';
                this.backHome();
                this.$refs[f].clearValidate();
                this.fileNameModel='';
            },
            backHome:function () {

                this.closeAddDialog();
                this.isShowingBox = false;
                this.dialogFormVisible = false;
                this.dialogFormVisibleNew = false;

                this.dialogInfoVisible = false;
            },
            backHomeAdd:function () {

                this.closeAddDialogAdd();
                this.isShowingBox = false;
                this.dialogFormVisible = false;
                this.dialogFormVisibleNew = false;

                this.dialogInfoVisible = false;
            },
            /**
             * 点击X关闭模态框
             * */
            closeAddDialog:function () {

                document.getElementById("uploadForm").reset();
//                $("#preview")[0].innerHTML = '<img id="imghead" src="">';

                var form = this.$refs.form;
                form.clearValidate();
                this.isShowingBox = false;
                this.dialogFormVisible = false;
                this.dialogFormVisibleNew = false;
                this.dialogInfoVisible = false;
            },
            closeAddDialogAdd:function () {

                document.getElementById("uploadFormNew").reset();
                $("#previewNew")[0].innerHTML = '<img id="imghead" src="">';

                var form = this.$refs.formNew;
                form.clearValidate();
                this.isShowingBox = false;
                this.dialogFormVisible = false;
                this.dialogFormVisibleNew = false;
                this.dialogInfoVisible = false;
            },


            ajaxSubmitForm:function() {
                if(this.form.adFilePath != '') {
                    var that = this;
                    var option = {
                        url: '${basePath}bank/ad/upload',
                        type: 'POST',
                        dataType: 'json',
                        headers: {"ClientCallMode": "ajax"}, //添加请求头部
                        success: function (data) {

                        },
                        error: function (data) {
                            // $(".main-right").empty();
                            //$(".main-right").load('${basePath}/merchant_list_IE');
                            sessionStorage.setItem("newImgNameAd",data.responseText);
                        }
                    };
                    $("#uploadForm").ajaxSubmit(option);
                    return false;
                }else {
                    layer.msg("请选择文件后再点击上传", {icon: 5});
                }
            },
            ajaxSubmitFormAdd:function() {
                    var that = this;
                    var option = {
                        url: '${basePath}bank/ad/upload',
                        type: 'POST',
                        dataType: 'json',
                        headers: {"ClientCallMode": "ajax"}, //添加请求头部
                        success: function (data) {

                        },
                        error: function (data) {
                            // $(".main-right").empty();
                            //$(".main-right").load('${basePath}/merchant_list_IE');
                            sessionStorage.setItem("newImgNameAdAdd",data.responseText);

                        }
                    };
                    $("#uploadFormNew").ajaxSubmit(option);
                    return false;

            },
            uploadImg123:function (e) {
                previewImage(e.currentTarget,'preview','imghead');
                var nameFlis = $("#uploadImg").val();
                var fileName123 = nameFlis.split("\\");
                this.fileNameModelNew = fileName123[fileName123.length-1];
                var endName = this.fileNameModelNew.split(".")[1];
                this.form.adFilePath = this.fileNameModelNew;

                if(endName == 'jpg' ||endName == 'png'){
                    this.isShowDelBtnOld = true;
                    this.ajaxSubmitForm();
                }else {
                    this.isTrueName = false;
                    layer.msg('请选择jpg、png、png格式文件上传', {icon: 5});
                }

            },
            uploadImg123New:function (e) {
                previewImage(e.currentTarget,'previewNew','imghead');
                var nameFlis = $("#uploadImgNew").val();
                var fileName123 = nameFlis.split("\\");
                this.fileNameModel = fileName123[fileName123.length-1];
                var endName = this.fileNameModel.split(".")[1];
                this.form.adFilePath = this.fileNameModel;

                if(endName == 'jpg' ||endName == 'png'){
                    this.isShowDelBtnNew = true;
                    this.ajaxSubmitFormAdd();
                }else {
                    this.isTrueName = false;
                    layer.msg('请选择jpg、png、png格式文件上传', {icon: 5});
                }

            },
            removePic:function () {
                var newImgName = sessionStorage.getItem('newImgNameAdAdd');
                var url = "${basePath}bank/ad/removeImg";
                var option = {
                    'fileName': newImgName
                };
                sendService(url, option, function (resData) {
                    if (resData.status == 'success') {
                        ad.form.adFilePath = "";
                        ad.isShowDelBtnNew = false;
                        sessionStorage.setItem('newImgNameAdAdd','');
                        document.getElementById("uploadFormNew").reset();
                        $("#previewNew")[0].innerHTML = '<img id="imghead" src="">';
                    }
                });
            },
            removePicOld:function () {
                var newImgName = sessionStorage.getItem('newImgNameAdAdd');
                var url = "${basePath}bank/ad/removeImg";
                var option = {
                    'fileName': ad.form.adFilePath
                };
                sendService(url, option, function (resData) {
                    if (resData.status == 'success') {
                        ad.form.adFilePath = "";
                        ad.isShowDelBtnOld = false;
                        sessionStorage.setItem('newImgNameAd','');
                        document.getElementById("uploadForm").reset();
                        ad.imgSrc = '';
                    }
                });
            },
            submitForm: function (formName) {
                this.$refs[formName].validate(
                    function (valid) {
                        if (valid) {
                            var url = "${basePath}bank/ad/save";
                            var newImgName = sessionStorage.getItem('newImgNameAd');
                            var option = {
                                'adId':ad.form.adId,
                                'adName': ad.form.adName,
                                'adLink': ad.form.adLink,
                                'adFilePath': newImgName,
                                'adType': ad.form.adType,
                                'status': ad.form.status ? '1' : '0',
                                'adDesc': ad.form.adDesc,
                            };
                            sendService(url, option, function (resData) {
                                if (resData.status == 'success') {
                                    ad.goPage("/bank/ad");
                                    layer.msg(resData.msg, {icon: 6});
                                } else {
                                    layer.msg(resData.msg, {icon: 5});
                                }
                            });
                        } else {
                            layer.msg("表单验证失败，请检查", {icon: 5});
                            return false;
                        }
                    }

                );
            },
            submitFormNew: function (formName) {
                this.$refs[formName].validate(
                    function (valid) {
                        if (valid) {
                            var url = "${basePath}bank/ad/save";
                            var newImgName = sessionStorage.getItem('newImgNameAdAdd');
                            var option = {
                                'adId':ad.form.adId,
                                'adName': ad.form.adName,
                                'adLink': ad.form.adLink,
                                'adFilePath': newImgName,
                                'adType': ad.form.adType,
                                'status': ad.form.status ? '1' : '0',
                                'adDesc': ad.form.adDesc,
                            };
                            sendService(url, option, function (resData) {
                                console.log(JSON.stringify(option));
                                if (resData.status == 'success') {
                                    ad.goPage("/bank/ad");
                                    layer.msg(resData.msg, {icon: 6});
                                } else {
                                    layer.msg(resData.msg, {icon: 5});
                                }
                            });
                        } else {
                            layer.msg("表单验证失败，请检查", {icon: 5});
                            return false;
                        }
                    }

                );
            },
            handleCurrentChange: function (currentPage) {
                ad.currentPage = currentPage;
                ad.searchFun();
            },
            searchFun: function () {
                var options = {
                    'currentPage': ad.currentPage,
                    'keywords': ad.keywords,
                    'queryAdType': ad.queryAdType
                };
                var url = '${basePath}bank/ad/getAdlist';
                sendService(url, options, function (resData) {
                    if (resData.status == 'success') {
                        resData.t.forEach(function (item) {
                            if (item.adType == '0') {
                                item.adType = '普通广告'
                            } else if (item.adType == '1') {
                                item.adType = 'WEB广告'
                            }
                            item.status = item.status == '1';
                        });
                        ad.tableData = resData.t;
                        ad.totalPage = resData.page.totalPage;
                        ad.totalCount = resData.page.totalResult;
                        fenYeProblem(resData.page.totalPage);
                    }
                });
            },
            filterAdType: function (value, row) {
                alert(row.status);
                row.status = (value == 1);
            },
            /**
             * 开关
             */
            selSwitchBox:function (e,s) {
                if(s == false || s == '0'){
                    $(e.currentTarget).find("i").attr("class","switchCircle");
                    $(e.currentTarget).find("i").children().attr("class","switchCircleInfo");
                }
                if(s == true || s == '1'){
                    $(e.currentTarget).find("i").attr("class","switchCircleActive");
                    $(e.currentTarget).find("i").children().attr("class","switchCircleInfoActive");
                }
            },
            changeAdType: function (index, row) {
                var url = "${basePath}bank/ad/change";
                var options = {
                    'adId': row.adId,
                    'status': row.status ? '1' : '0'
                };
                sendService(url, options, function (resData) {
                    if (resData.status == 'success') {
                        layer.msg("操作成功", {icon: 6});
                    } else {
                        layer.msg("操作失败！请联系管理员！", {icon: 5});
                    }
                });
                return true;
            },
            edit: function (index, row) {
                if (index != undefined) {
                    var url = "${basePath}bank/ad/editQuery";
                    var options = {
                        'adId': row.adId,
                    };
                    sendService(url, options, function (resData) {
                        if (resData.status == 'success') {
                            if (resData.t.adId != '') {
                                ad.form.adId = resData.t.adId;
                                ad.form.adName = resData.t.adName;
                                ad.form.adType = resData.t.adType;
                                ad.form.adLink = resData.t.adLink;
                                ad.form.adFilePath = resData.t.adFilePath;
                                ad.form.status = resData.t.status == '1';
                                ad.form.adDesc = resData.t.adDesc;
                                ad.form.fileList = [{
                                    name: resData.t.adFilePath,
                                    url: '${basePath}uploadFiles/uploadImgs/' + resData.t.adFilePath
                                }];
                            }
                            if(ad.form.adFilePath != ''){
                                ad.isShowDelBtnOld = true;
                            }
                            ad.imgSrc = '${basePath}uploadFiles/uploadImgs/' + resData.t.adFilePath;

                            ad.dialogTitle = "编辑广告";
                            ad.isShowingBox = true;
                            ad.dialogFormVisible = true;
                        } else {
                            ad.$message.error("操作失败！请联系管理员！");
                        }
                    });
                    ad.imgSrc = '${basePath}uploadFiles/uploadImgs/' + row.adFilePath;
                    console.log(ad.imgSrc)
                } else {
                    ad.form.adId = "";
                    ad.form.adName = "";
                    ad.form.adLink = '';
                    ad.form.adFilePath = '';
                    ad.form.status = true;
                    ad.form.adDesc = '';
                    ad.dialogTitle = "新增广告";
                    ad.dialogFormVisible = true;
                    ad.isShowingBox = true;
                    ad.form.fileList = [];
                }
            },
            addAd:function () {
                ad.form.adType= '';
                ad.form.adId = "";
                ad.form.adName = "";
                ad.form.adLink = '';
                ad.form.adFilePath = '';
                ad.form.status = true;
                ad.form.adDesc = '';
                ad.dialogTitle = "新增广告";
                ad.dialogFormVisibleNew = true;
                ad.isShowingBox = true;
                ad.form.fileList = [];
            },
            del: function (index, row) {
                var msg = confirm('此操作将永久删除该广告信息, 是否继续?');
                if(msg){
                    var url = "${basePath}bank/ad/del";
                    var options = {
                        'adId': row.adId,
                    };
                    sendService(url, options, function (resData) {
                        if (resData.status == 'success') {
                            layer.msg(resData.msg, {icon: 6});
                            ad.goPage("/bank/ad")
                        } else {
                            layer.msg(resData.msg, {icon: 6});
                        }
                    });
                }
            },
            upScuccess: function (response, file, fileList) {
                ad.form.adFilePath = response;
            },
            handleRemove: function (file, fileList) {
                var url = "${basePath}bank/ad/removeImg";
                var option = {
                    'fileName': ad.form.adFilePath
                };
                sendService(url, option, function (resData) {
                    if (resData.status == 'success') {
                        ad.form.adFilePath = "";
                    }
                });
            },
            handleRowHandle: function (row,event,column) {
                if(column.label == '操作' || column.label == '状态'){
                    return;
                }
                ad.isShowingBox = true;
                ad.dialogInfoVisible = true;
                ad.bean = row;
                //ad.bean.status = ad.bean.status?'启用':'停用';
                if(ad.bean.createDate && ad.bean.createDate !='')
                    ad.bean.createDate = new Date(ad.bean.createDate).toLocaleDateString();
                if(ad.bean.updateDate && ad.bean.updateDate !='')
                    ad.bean.updateDate = new Date(ad.bean.updateDate).toLocaleDateString();
            },
            goPage: function (url) {
                $(".main-right").empty();
                $(".main-right").load('${basePath}' + url);
            }
        },
        created: function () {
            var url = '${basePath}bank/ad/getAdlist';
            var options = {currentPage: 1};
            var loading;
            sendService(url, options, function (resData) {
                if (resData.status == 'success') {
                    layer.close(loadRole);
                    resData.t.forEach(function (item) {
                        if (item.adType == '0') {
                            item.adType = '普通广告'
                        } else if (item.adType == '1') {
                            item.adType = 'WEB广告'
                        }
                        item.status = item.status == '1';
                    });
                    ad.tableData = resData.t;
                    ad.totalPage = resData.page.totalPage;
                    ad.totalCount = resData.page.totalResult;
                    fenYeProblem(resData.page.totalPage);
                } else {
                    alert(resData);
                }
            });
        },
        computed:{
            isOverflow:function () {
                if(this.isShowingBox){
                    $(".main-right").css({'overflow':"hidden"});
                }
                if(!this.isShowingBox){

                    $(".main-right").css({'overflow':"auto"});
                }

            }
        }
    });
</script>

<style scoped>
    /*图片删除按钮*/
    .delImgBtn{
        font-style: normal;
        position: absolute;
        left: 0px;
        top: 0;
        width: 18px;
        height: 18px;
        line-height: 18px;
        text-align: center;
        font-size: 16px;
        color: #666;
        background-color: #ddd;
        border: 1px solid #ccc;
        border-radius: 5px;
        z-index: 23333333;
        cursor: pointer;
    }
    .delImgBtn:hover{
        color: #fff;
        background-color: #666;
    }



    .switchInput{
        display: none;
    }
    /* 开关样式开始 */
    .switchBox{
        display: inline-block;
        line-height: 20px;
    }
    .switchBox .switchBtn{
        position: relative;
        display: inline-block;
        margin-top: 15px;
        cursor: pointer;
    }
    .switchWords{
        vertical-align: middle;
        display: inline-block;
        margin: 0 5px;
        margin-bottom: 15px;

    }
    .switchCircle{
        position: relative;
        display: inline-block;
        width: 40px;
        height: 20px;
        border-radius: 10px;
        background-color: #ff4444;
    }
    .switchCircleActive{
        position: relative;
        display: inline-block;
        width: 40px;
        height: 20px;
        border-radius: 10px;
        background-color: #13ce66;
    }
    .switchCircle .switchCircleInfo{
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background-color: #fff;
        position: absolute;
        left: 1px;
        top: 1px;
    }

    .switchCircleInfoActive{
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background-color: #fff;
        position: absolute;
        right: 1px;
        top: 1px;
    }
    /* 开关样式结束 */


    .el-table__header,.el-table__body{
        width: 100% !important;
    }
    .el-table tr{
        height: 40px;
    }
    .addUsrtBtn{
        padding: 9px 15px;
        font-size: 12px;
    }
    /*table按钮样式调整开始*/
    .el-button--mini, .el-button--mini.is-round{
        padding: 4px 10px;
    }
    .userManageBox .editBtn{
        color: #409EFF;
        background-color: transparent;
        border-color: transparent;
    }
    .userManageBox .editBtn:hover{
        color: #fff;
        background-color: #409EFF;
        border-color: #409EFF;
    }

    .userManageBox .delBtn{
        color: #fa5555;
        background-color: transparent;
        border-color: transparent;
    }
    .userManageBox .delBtn:hover{
        color: #fff;
        background-color: #fa5555;
        border-color: #fa5555;
    }
    .userManageBox .resetBtn{
        color: #02dda7;
        background-color: transparent;
        border-color: transparent;
    }
    .userManageBox .resetBtn:hover{
        color: #fff;
        background-color: #02dda7;
        border-color: #02dda7;
    }
    .userManageBox .el-button{
        margin-left: 0;
    }
    /*table按钮样式调整结束*/
    .table_search, .table_btn{
        height: 60px;
        margin-bottom: 10px;
        background: #fff;
        padding: 10px 20px 30px;
    }
    /*.el-table td, .el-table th.is-leaf{*/
    /*border: none;*/
    /*}*/
    .el-table::before{
        height: 0;
    }
    .addUserBox{
        margin-bottom: 0;
        border-bottom: 1px solid #f2f4f8;
    }
    .el-input{
        width: auto;
    }
    .text-r{
        text-align: left;
    }
    .footerBox {
        width: 100%;
        height: 50px;
        background-color: #fff;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding-top: 9px;
        text-align: right;
    }

    .add-template-form > div{
        margin-left: 45px;
    }
    .el-dialog__header span{
        padding-left: 20px;
    }
    #menuContent{
        left: 0 !important;
        top: 40px !important;
        background-color: #eee;
        border: 1px solid #ccc;
    }
    .edit-template-form > div{
        margin-left: 45px;
    }
    /*.edit_dialog .el-form-item.is-required .el-form-item__label:before{*/
    /*content: '';*/
    /*}*/
    #addMenuContent{
        left: 0 !important;
        top: 40px !important;
        background-color: #eee;
        border: 1px solid #ccc;
    }


    .dialogDetails .topNav{
        margin-left: 30px;
        margin-bottom: 20px;
    }
    .dialogDetails .title-template{
        height: 60px;
        line-height: 60px;
        font-size: 18px;
        padding-left: 30px;
        margin-bottom: 10px;
        color: #333333;
        background: #ffffff;
    }

    .dialogDetails .info-template-content{
        background: #ffffff;
    }
    .dialogDetails .item-row{
        height: 46px;
        line-height: 46px;
        font-size: 16px;
        padding-left: 100px;
    }
    .dialogDetails .item-row div:first-of-type{
        color: #aaa;
        text-align: left
    }
    .dialogDetails .item-row div:last-of-type{
        color: #333;
        padding-left: 80px
    }

    .dialogDetails .info-template-content .el-row:nth-child(even){
        background-color: #F8F9FB;
    }
    .dialogDetails .info-template-content .el-row:last-of-type{
        margin-bottom: 30px;
    }
    .dialogDetails .el-dialog{
        overflow: hidden;
        -webkit-box-shadow: 0 0 16px rgba(0,0,0,0.5);
        -moz-box-shadow: 0 0 16px rgba(0,0,0,0.5);
        box-shadow: 0 0 16px rgba(0,0,0,0.5);
    }


    .el-dialog__header{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(255,68,68,1);
        width: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        background-color: #fff;
    }
    .el-dialog__headerbtn .el-dialog__close{
        color: #aaa;
        font-size: 22px;

    }
    .el-dialog__body{
        padding-top: 75px;
    }
    .dialogDetails .el-dialog__body{
        padding: 50px 0 0 0 ;
    }
    .errorBox{
        color: #fa5555;
        font-size: 12px;
        line-height: 1;
        padding-top: 4px;
        position: absolute;
        top: 100%;
        left: 0;
    }
    .errorBox2333{
        color: #fa5555;
        font-size: 12px;
    }
    /*#selManage label{*/
    /*position: relative;*/
    /*}*/
    #selManage label:before{
        content: '*';
        color: #fa5555;
        margin-right: 4px;

    }


    /*详情页样式*/

    .el-dialog__header{
        z-index: 10;
    }
    .el-dialog{
        margin-top: 12vh !important;
    }
    .el-dialog__wrapper{
        overflow: hidden;
    }
    .el-dialog__header span{
        padding-left: 20px;
    }
    .el-dialog__wrapper .el-dialog__body{
        margin-top: 40px;
        height: 350px;
        overflow: auto;
    }
    .el-table__header .el-icon-arrow-down{
        display: none;
    }
    .el-table-filter{
        display: none;
    }
    .el-table__row{
        background-color: rgba(255,255,255,0) !important;
    }
    .el-table__row td{
        border-bottom: 1px solid #e6ebf5 !important;
    }
    .el-table__header .caozuobox{
      height: 40px !important;
    }







    #labelImg{
        display: block;
        width: 146px;
        height: 146px;
        line-height: 146px;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 999;
        background-color: rgba(255,255,255,0.1);
    }
    #imghead {
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
    }
    #preview{
        position: relative;
        width: 146px;
        height: 146px;
        overflow: hidden;
        background-color: #f8f9fb;
        border: 1px solid #ddd;
    }
    #preview span{
        position: absolute;
        left: 10%;
        top: 40%;
        font-size: 12px;
    }
    .imagBox{
        position: absolute;
        left: 0;
        top: 0;
        width: 146px;
        height: 146px;
    }
    #uploadImg{
        font-size: 12px;
        position: absolute;
        left: -30000px;
        top: 0;
        opacity:0;
        filter:alpha(opacity=0);
        cursor: pointer;
    }
    .imagesContainer{
        display: inline-block;
        position: relative;
        width: 146px;
        height: 146px;
    }
    .noticeUploadImg{
        position: absolute;
        left: 160px;
        top: 0px;
        font-size: 12px;
        color: #ccc;
    }
    #uploadForm{
        position: relative;
        margin-top: 10px;
    }


    .el-textarea__inner{
        overflow: auto;
    }



    #labelImgNew{
        display: block;
        width: 146px;
        height: 146px;
        line-height: 146px;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 999;
        background-color: rgba(255,255,255,0.1);
    }
    #imghead {
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
    }
    #previewNew{
        position: relative;
        width: 146px;
        height: 146px;
        overflow: hidden;
        background-color: #f8f9fb;
        border: 1px solid #ddd;
    }
    #previewNew span{
        position: absolute;
        left: 10%;
        top: 40%;
        font-size: 12px;
    }
    .imagBox{
        position: absolute;
        left: 0;
        top: 0;
        width: 146px;
        height: 146px;
    }
    #uploadImgNew{
        font-size: 12px;
        position: absolute;
        left: -30000px;
        top: 0;
        opacity:0;
        filter:alpha(opacity=0);
        cursor: pointer;
    }
    .imagesContainer{
        display: inline-block;
        position: relative;
        width: 146px;
        height: 146px;
    }
    .noticeUploadImg{
        position: absolute;
        left: 160px;
        top: 0px;
        font-size: 12px;
        color: #ccc;
    }
    #uploadFormNew{
        position: relative;
        margin-top: 10px;
    }

    .el-textarea__inner{
        overflow: auto;
    }
    #liulan{
       background-color: #409EFF;
        margin:15px 0;
        font-size: 12px;
        line-height: 32px;
        width: 80px;
        height: 32px;
    }
</style>

